import React, { useState, useEffect, useCallback } from "react";
import { useLocation } from 'react-router-dom'
import NavHeader from "@/component/NavHeader/navHeader";
import './practice.scss'
import api, { types } from '@/api/index'
import { Base } from './model'
import LiveHelpIcon from '@material-ui/icons/LiveHelp';
import AccessTimeIcon from '@material-ui/icons/AccessTime';
import OutdoorGrillIcon from '@material-ui/icons/OutdoorGrill';
import Divider from '@material-ui/core/Divider';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

import Ingred from './component/ingred/ingred'
import Mark from './component/mark/mark'
import Process from './component/process/process'
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import { Difficulty } from "@/api/types";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            position: 'sticky',
            top: '56px',
            zIndex: 1,
            overflow: 'hidden',
            background: 'white',
            boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
        },
    }),
);

export default function Practice(props: any) {
    const classes = useStyles();
    const location = useLocation<{ id: string }>();

    const [ingredients, setIngredients] = useState<types.Ingredient[]>([]);
    const [makes, setMakes] = useState<types.IObjectKeys[]>([]);
    const [base, setBase] = useState<Base>(Base.of({ }));
    const [value, setValue] = React.useState('mark');
    const componentMap: types.IObjectKeys = {
        mark: <Mark makes={makes} />,
        ingred: <Ingred ingredients={ingredients} />,
        process: <Process />,
    }

    const handleChange = (event: React.ChangeEvent<{}>, newValue: string) => {
        setValue(newValue);
    };

    const feachCuisines = async () => {
        const { id } = qs.parse(location.search, { ignoreQueryPrefix: true }) as { id: string };
        const info = await api.getCuisine(id);
        const { data } = info;
        setBase(Base.of(data))
        setIngredients(data.ingredients)
        setMakes(data.makes)
    }

    useEffect(() => {
        feachCuisines();
    }, [])

    useEffect(() => {
        const scrollElement = document.scrollingElement || document.documentElement;
        scrollElement.scrollTo({
            top: 380,
            behavior: 'smooth'
        })
    }, [value])

    type key = keyof typeof Difficulty;


    return (
        <div>
            <NavHeader title={base.name} />
            <img className='pra-img' src={base.picture} alt="" />
            <div className='base-info'>
                <h3>{base.name}</h3>
                <p>{base.describe}</p>
                <div className='indicator'>
                    <div className='indicator-item'>
                        <LiveHelpIcon color='primary' className='indicator-icon' />
                        <p>难度: {Difficulty[base.relatedInfo.difficulty]}</p>
                    </div>
                    <div className='indicator-item'>
                        <AccessTimeIcon color='primary' />
                        <p>时长: {base.relatedInfo.cookingTime}</p>
                    </div>
                    <div className='indicator-item'>
                        <OutdoorGrillIcon color='primary' />
                        <p>口味: {base.relatedInfo.taste}</p>
                    </div>
                </div>
                {/* <Divider /> */}
            </div>

            <Paper square>
                <Tabs
                    className={classes.root}
                    centered
                    value={value}
                    indicatorColor="secondary"
                    onChange={handleChange}
                    variant="fullWidth"
                    textColor="secondary"
                >
                    <Tab label="做法" value='mark' />
                    <Tab label="食材" value='ingred' />
                    <Tab label="进度" value='process' />
                </Tabs>
                {componentMap[value]}
            </Paper>
        </div>
    )
}